import { Button, Form, Input, Modal, Radio,message } from "antd";
import React, { createRef, useState } from "react";
import url from "../../../config/url";
import req from "../../../http/req";
const Bianj = (props) => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const fnn = createRef();

  const showModal = () => {
    setIsModalVisible(true);
    // console.log(props.fn());
    fnn.current.setFieldsValue({
      id: props.fn().id,
      username: props.fn().username,
      mobile: props.fn().mobile,
      password: props.fn().password,
      email: props.fn().email,
      gender: props.fn().gender,
    });
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };
  const onFinish = (values) => {
    // console.log(values);
    req
      .put(url.Deletedel + `/${values.id}`, {
        username: values.username,
        mobile: values.mobile,
        password: values.password,
        email: values.email,
        gender: values.gender,
      })
      .then((res) => {
        if (res.data.errNo === 0) {
          // 刷新页面
          window.location.reload();
          message.success("修改成功");
        } else {
          message.warning("修改失败");
        }
      });
  };
  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <>
      <Button
        style={{
          backgroundImage: "linear-gradient(#1FCAB8,#1dCAB8,#1ba299)",
          borderRadius: "5px",
          color: "#fff",
        }}
        type="primary"
        onClick={showModal}
      >
        编辑
      </Button>
      <Modal
        footer={null}
        forceRender={true}
        title="编辑"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form
          ref={fnn}
          onFinish={onFinish}
          layout="vertical"
          name="form_in_modal"
          initialValues={{
            modifier: "public",
          }}
        >
          <Form.Item name="id" label="id名">
            <Input />
          </Form.Item>
          <Form.Item
            name="username"
            label="用户名"
            rules={[
              {
                required: true,
                message: "请输入用户名!",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="mobile"
            label="手机号"
            rules={[
              {
                pattern: /^[1][3-9][\d]{9}/,
                required: true,
                message: "请输入正确的手机号!",
              },
            ]}
          >
            <Input type="textarea" />
          </Form.Item>
          {/* <Form.Item
            name="password"
            label="密码"
            rules={[{ len: 6, required: true, message: "请输入密码!" }]}
          >
            <Input type={"password"} />
          </Form.Item> */}
          <Form.Item name="gender" label="性别">
            <Radio.Group>
              <Radio value="1">男</Radio>
              <Radio value="2">女</Radio>666
            </Radio.Group>
          </Form.Item>
          <Form.Item
            name="email"
            label="邮箱"
            rules={[
              {
                required: true,
                message: "请输入正确邮箱!",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item>
            {/* <Button>取消</Button> */}
            {/*  htmlType="submit" ？？？ */}
            <Button type="primary" htmlType="submit">
              确定
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default Bianj;
